<template>
  <div class="shopList">
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad(value)">
      <van-cell v-for="item in list"
                :key="item.id"  @click="$router.push(`/shop/${item.id}`)">

        <van-cell title="单元格"
                  icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template slot="icon">
            <van-image width="63px"
                       height="63px"
                       class="shopImg"
                       fit="cover"
                       :src="'https://elm.cangdu.org/img/' +item.image_path" />
          </template>
          <template slot="title">
            <van-row>
              <van-col span="19">
                <van-tag color='#f9da57'
                         size="small"
                         text-color='black'>品牌</van-tag>
                <span style="font-weight:700"> {{item.name}}</span>
              </van-col>
              <van-col span="5"
                       class="tag">
                <van-tag v-for="(value,index) in item.supports "
                         :key="index"
                         plain
                         class="tags"
                         color='#ccc'
                         text-color='#ccc'>{{value.icon_name}}</van-tag>

              </van-col>
            </van-row>
            <van-row type="flex"
                     justify="space-between">
              <van-col span="16">
                <van-rate v-model="starValue"
                          size="10px"
                          gutter="2px"
                          color="#f19f3b"
                          readonly
                          allow-half
                          void-icon="star"
                          void-color="#eee" />
                <span style="font-size:13px;color:#f19f3b"> {{item.rating}}</span>
                <span class="public"> 月售{{item.recent_order_num}}单</span>
              </van-col>
              <van-col span="8"
                       class="mode">
                <span v-if="item.delivery_mode&&item.delivery_mode.text">{{item.delivery_mode.text }}</span>
                <span class="ontime">准时达</span>

              </van-col>
            </van-row>
            <van-row>
              <van-col class="public"
                       span="12">
                <span> ¥{{item.float_minimum_order_amount}}起送 / </span>
                <span>{{item.piecewise_agent_fee.tips}}</span>

              </van-col>
              <van-col class="public">
                <span>{{item.distance}} / </span>
                <span style="color:#4d8de1">{{item.order_lead_time}}</span>
              </van-col>
            </van-row>

          </template>
        </van-cell>

      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getRestaurantsList } from '@/api/shop'
export default {
  name: 'ShopList',
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      starValue: 5,
      offset: 0,
      limit: 20,
      value: {}


    };
  },

  created() {


  },

  methods: {
    async onLoad(Value1) {
      try {
        this.loading =true

        if (Value1) {   
         
          this.value = Value1
        }

        var data = await getRestaurantsList({...{offset: this.offset }, ...this.value})


      if (data.data.length) {
        this.list = [...this.list, ...data.data]
 
        this.offset += this.limit
        this.loading = false
      } else {
        this.finished = true
      }





    } catch(err) {
      console.log(err);

    }

  },

}


}
</script>

<style scoped>
.van-cell {
  padding: 8px 0px 8px 5px;
}
.shopImg {
  padding-right: 3px;
}
.van-tag {
  padding: 0 2px;
}
.tags {
  margin-right: 1px;
}
.mode span {
  display: inline-block;
  border: 1px solid #4d8de1;
  height: 12px;
  line-height: 12px;
  font-size: 10px;
  color: #4d8de1;
  border-radius: 1px;
}
.mode .ontime {
  background-color: #4d8de1;
  color: white;
  margin-right: 1px;
}
.public {
  font-size: 12px;
  color: #c5c5c5;
  margin-left: 2px;
  border-radius: 2px;
}
</style>
